<template>
	<view class="wrap" @click="chooseStore">
		<view class="store">
			<text class="tag" v-if="isLocation == 1">当前</text>
			<text class="storeName">{{storeName}}</text>
		</view>
		<view class="address">
			{{storeAddress}}
		</view>

		<view class="bottomContent">
			<view class="distanceWrap">
				<text class="distance">0km</text>
				<text class="title">距离</text>
			</view>

			<view style="display: flex;">
				<image @click.stop="callPhone()" class="icon-image" src="/marketing/static/coupon/callPhone.png" mode=""></image>
				<image @click.stop="navi()" class="icon-image" src="/marketing/static/coupon/map-navigation.png" mode=""></image>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: 'store-cell',
		props: {
			isLocation: {
				type: String | Number,
				default: 0
			},
			storeName: {
				type: String,
				default: '深圳汇天源龙岗店'
			},

			storeAddress: {
				type: String,
				default: '深圳市龙岗区华侨城海蓝街道1105号海蓝街道海蓝街道海 蓝街道1105号'
			},

			distance: {
				type: String,
				default: '1.15'
			},
			phone: {
				type: String,
				default: '18712345678'
			},

			longitude: {
				type: Number,
				default: 0
			},
			latitude: {
				type: Number,
				default: 0
			}
		},
		methods: {
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.phone,
					success: (res) => {
						console.log('拨打电话成功');
					}
				})
			},
			navi() {
				uni.openLocation({ //​使用微信内置地图查看位置。
					latitude: this.latitude, //要去的纬度-地址
					longitude: this.longitude, //要去的经度-地址
					name: this.storeName,
					address: this.storeAddress,
					success() {
						console.log('成功了');
					},
					fail(msg) {
						console.log(msg)
					}
				})
			},
			chooseStore() {
				this.$emit('chooseStore');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		background-color: #fff;
		border-radius: 5px;
		box-shadow: 0px 0px 0px NaNpx #000000;
		padding: 25upx;
		margin: 10rpx 0;
	}

	.tag {
		padding: 9upx;
		color: #fff;
		font-size: 20upx;
		border-radius: 3upx;
		background-color: $main-color;
		margin-right: 7upx;
	}

	.storeName {
		font-size: 28upx;
		font-weight: bold;
		letter-spacing: 1upx;
	}

	.address {
		margin-top: 20upx;
		font-size: 24upx;
		color: #999;
	}

	.bottomContent {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20upx;
	}

	.distanceWrap {
		display: flex;
		flex-direction: column;
		align-items: center;

		.distance {
			font-size: 26upx;
			color: #666;
		}

		.title {
			font-size: 22upx;
			color: #999;

		}
	}

	.icon-image {
		width: 34upx;
		height: 34upx;
		margin-left: 70upx;
	}
</style>
